<template>
  <Layout>
    <!-- 插槽 -->
    <template #main-content>
      <div class="flex items-center justify-center flex-1">
        <div class="max-w-3xl w-full">
          <div class="text-center mb-10">
            <div class="flex items-center justify-center mb-3">
              <SvgIcon name="aiBot" customCss="size-10 text-gray-700 mr-3" />
              <h2 class="text-2xl text-gray-800">我是KittenBot，很高兴见到你！</h2>
            </div>
            <p class="text-gray-500 mb-6">我可以帮你写代码、写作各种创意内容，请把你的任务交给我吧~</p>
            <!-- 输入区域 -->
            <ChatInputBox v-model="userMessage" @sendMessage="sendMessage"></ChatInputBox>

          </div>
          
        </div>

      </div>
    </template>
  </Layout>
</template>

<script setup>
import Layout from '@/layout/Layout.vue'
import SvgIcon from '@/components/SvgIcon.vue'
import { ref, watch } from 'vue'
import ChatInputBox from '@/components/ChatInputBox.vue'
import { newChat } from '@/api/chat'
import router from '@/router/router'

// 用户输入消息
const userMessage = ref('')

watch(userMessage, (newText) => {
  console.log(`子组件传递的新值: ${newText}`)
})

// ===================== 发送消息 =====================
const sendMessage = (payload) => {
  console.log(payload)
  if (!userMessage.value.trim()) return;
  // 新建对话
  newChat(userMessage.value).then(res => {
    if(res.data.success) {
      router.push({
        name: 'chatPage',
        params: {
          chatId: res.data.data.uuid
        },
        state: {
          firstMessage: userMessage.value
        }
      })
    }
  })
}


</script>

<style scoped></style>